const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { resolve } = require('path');
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    // 入口文件
    entry:'./main.js',
    // 输出文件
    output:{
        // 输出文件名称
        filename:'js/bundle.js',
        // 输出文件路径
        path:path.resolve(__dirname,'./dist'),
    },
    // loader配置
        // 下载->使用
    module:{
        rules:[
            {
                // 匹配哪些文件
                test:/\.css$/,
                // 使用哪些loader进行处理(从后往前)
                use:[
                    // 创建style标签,将js中的样式资源插入进去,添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载到js中
                    'css-loader'
                ]
            },
            {
                test:/\.less$/,
                use:[
                    'style-loader',
                    'css-loader',
                    // 需要下载less-loader与less
                    'less-loader',
                ]
            },
            {
                test:/\.(jpg|png|gif)$/,
                // 使用多个loader 用use,只使用一个loader用loader
                // 需要下载url-loader 与 file-loader,url-loader依赖于file-loader
                loader:'url-loader',
                // 传给loader的配置对象
                options:{
                    // 图片大小小于8kb,就会被base64处理
                    // 优点:减少请求数量(减轻服务器压力)
                    // 缺点:图片体积会更大(文件请求速度更慢)
                    limit:8*104,
                    // 问题:url-loader默认是使用es6模块化解析,而html-loader引入图片是用common.js
                    // 解析时会出现问题:[object Module]
                    // 解决:关闭url-loader 的es6模块化,使用common.js解析
                    esModule:false,
                    // 给图片文件命名
                    // [hash:10] 取hash的前十位
                    // [ext] 取文件原扩展名
                    name:'[hash:10].[ext]',
                    outputPath:'imgs'
                }
            },
            // {
            //     test:/\.html$/,
            //     // 解析html中img标签的图片资源
            //     loader:'html-loader',
            // },
            // 打包其他资源(除了html/js/css资源以外的资源)
            {
                exclude:/\.(html|js|css|less)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    // plugins 配置
        // 下载->引入->使用
    plugins: [
        // new ExtractTextPlugin("styles.css"),
        new HtmlWebpackPlugin({
            // 复制 ./src/index.html 文件,并自动引打包输出的资源
            template:'./index.html'
        })
    ],
    // 模式
    mode:'development',
    // 开发服务器 devServer
    devServer:{
        // 资源地址
        contentBase:resolve(__dirname,'dist'),
        // 启动压缩
        compress:true,
        // 自动打开浏览器
        open:true,
        port:8000,
        // 开启HMR
        hot:true,
    }
}